<template>
    <div>
    
      <!-- 第一张图布局：单据 -->
      <div v-if="!currentView">
        <el-form :inline="true" style="margin-bottom: 16px;">
          <el-form-item label="跟单编号">
            <el-input placeholder="跟单编号" size="small" v-model="page.FollowOrderNumber"  clearable/>
          </el-form-item>
          <el-form-item label="单据编码">
            <el-input placeholder="单据编码" size="small" v-model="page.DocumentCode" clearable/>
          </el-form-item>
          <el-form-item label="物料编码">
            <el-input placeholder="物料编码" size="small" v-model="page.MaterialCode" clearable />
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input placeholder="物料名称" size="small" v-model="page.MaterialName" clearable />
          </el-form-item>
          <el-form-item>
            <el-date-picker
            v-model="page.BeginTime"
            type="date"
            placeholder="开始日期"
            style="width: 150px;"
          />
          -
          <el-date-picker
            v-model="page.EndTime"
            type="date"
            placeholder="结束日期"
            style="width: 150px;"
          />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
        </el-form>
        <div style="margin-bottom: 16px;">
          <el-button type="primary" @click="currentView = true">单据</el-button>
          <el-button type="primary">查询所有</el-button>
          <el-button type="success" @click="handleRouterAdd()">新增</el-button>
          <!-- <el-button type="warning">导出</el-button> -->
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="followOrderNumber" label="跟单编号" />
          <el-table-column prop="documentCode" label="单据编码" />
          <el-table-column prop="documentStatus" label="单据状态" />
          <el-table-column prop="outsourcingOrderNumber" label="委外单号" />
          <el-table-column prop="supplier" label="供应商" width="200" />
          <el-table-column prop="materialName" label="物料名称" />
          <el-table-column prop="materialCode" label="物料编码" />
          <el-table-column prop="outsourcingreturnQutity" label="退料数量" />
          <el-table-column prop="documentDate" label="单据日期" >
            <template #default="scope">
              {{scope.row.documentDate.substring(0,10)}}
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <!-- 第二张图布局：明细 -->
      <div v-else>
        <el-form :inline="true" style="margin-bottom: 16px;" >
          <el-form-item label="单据编码">
            <el-input placeholder="单据编码" size="small"  v-model="page.DocumentCode" clearable/>
          </el-form-item>
          <el-form-item label="单据状态" >
            <el-select placeholder="单据状态" size="small" style="width:120px" v-model="page.DocumentStatus" clearable>
              <el-option label="开立" value="开立"></el-option>
              <el-option label="审核" value="审核"></el-option>
              <el-option label="退回" value="退回"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务状态">
            <el-select placeholder="业务状态" size="small" style="width:120px" v-model="page.BusinessStatus" clearable>
              <el-option label="正常" value="开立"></el-option>
              <el-option label="挂起" value="审核"></el-option>
              <el-option label="手工关闭" value="手工关闭"></el-option>
              <el-option label="系统关闭" value="系统关闭"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
            v-model="page.BeginTime"
            type="date"
            placeholder="开始日期"
            style="width: 150px;"
          />
          -
          <el-date-picker
            v-model="page.EndTime"
            type="date"
            placeholder="结束日期"
            style="width: 150px;"
          />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
        </el-form>
        <div style="margin-bottom: 16px;">
          <el-button type="primary" @click="currentView = false">明细</el-button>
          <el-button type="primary">查询所有</el-button>
          <el-button type="success">新增</el-button>
          <el-button type="danger" @click="DeleteAllReturn(selectedIds)">删除</el-button>
          <!-- <el-button type="success">审核</el-button>
          <el-button type="warning">反审核</el-button> -->
        </div>
        <el-table :data="tableData" style="width: 100%" border  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="documentCode" label="单据编码" />
          <el-table-column prop="documentDate" label="单据日期" >
            <template #default="scope">
              {{scope.row.documentDate.substring(0,10)}}
            </template>
          </el-table-column>
          <el-table-column prop="documentStatus" label="单据状态" />
          <el-table-column prop="businessType" label="业务类型" />
          <el-table-column prop="businessStatus" label="业务状态" />
          <el-table-column prop="auditDate" label="审核日期" >
            <template #default="scope">
              {{scope.row.auditDate.substring(0,10)}}
            </template>
          </el-table-column>
          <el-table-column prop="操作" label="操作" >
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script setup>
  import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage ,ElMessageBox} from 'element-plus';
import {useRoute,useRouter} from 'vue-router'
import { saveAs } from 'file-saver';
import {KongaUrl} from '@/axios/axiosHelp';
let router=useRouter();  

const page=reactive({
  FollowOrderNumber:'',
  DocumentCode:'',
  MaterialCode:'',
  MaterialName:'',
  BeginTime:'',
    EndTime:'',
    pageindex:1,
    pagesize:15,
    totalpage:0,
    totalcount:0,
})
onMounted(()=>{
  onSearch();
})

const onSearch=()=>{
KongaUrl({
  url:'/weiwaidu/api/OutSourc/QueryOutsourReturn',
  method:'get',
  params:{
    FollowOrderNumber:page.FollowOrderNumber,
    DocumentCode:page.DocumentCode,
    MaterialCode:page.MaterialCode,
    MaterialName:page.MaterialName,
    BeginTime:page.BeginTime,
    EndTime:page.EndTime,
    pageindex:page.pageindex,
    pagesize:page.pagesize,
    
  }
})
.then(res=>{
  if(res.data.code==0){
    tableData.value=res.data.list;
    console.log('委外退货单',tableData.value)
    page.totalpage=res.data.totalpage;
    page.totalcount=res.data.totalcount;
  }
})
}
const tableData=ref([]);
  const currentView = ref(false) 
  const dateRange = ref([])

  const handleEdit=(row)=>{
    console.log('编辑的行',row)
    router.push({
      path:'/UpdateoutSourcingReturn',
      query:{  ...row}
    })
    console.log('编辑的行',row)
  }
  const handleDelete=(row)=>{
    ElMessageBox.confirm(
    '您确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(()=>{
    KongaUrl({
      url:'/weiwaixie/api/Outsour/DeleteOutSourcingReturn',
      method:'post',
      data:{
        id:row.id,
      }
    })
    .then(res=>{
    if(res.data.code==101){
      ElMessage.success('删除成功');
      onSearch();
    }
  })
  })

  .catch(()=>{
    ElMessage.info('已取消操作');
  })
  }
  const selectedIds = ref([])
// 选择项变化
const handleSelectionChange = (val) => {
  selectedIds.value = val.map(item => item.id)
  console.log('选中的数据', selectedIds.value)
}
// 批量删除操作
const DeleteAllReturn = (id) => {
  console.log('选中批量的数据', id.length)
  console.log('选中的数据', id)
  
  if(id.length === 0){
    ElMessage.error("请选择数据")
    return
  }
  
  ElMessageBox.confirm(
    `确定要删除选中的 ${id.length} 条数据吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(async () => {
    try {
      // 修正后的请求方式
      const response = await KongaUrl({
        url: '/weiwaixie/api/Outsour/DeleteAllOutSourcingReturn',
        method: 'post',
        data:{
          Id:id
        }
      })
      
      if(response.data.code == 101) {
        ElMessage.success('删除成功')
        // 刷新数据
        onSearch();
      } 
    } catch (error) {
      ElMessage.error('删除失败: ' + error.message)
    }
  })
  .catch(() => {
    ElMessage.info('已取消删除')
  })
}
const handleRouterAdd=()=>{
  router.push({
    path:'/AddOutSourcingReturn',
  })
}
  </script>